<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="Observer.js"></script>
</head>
<body>
    <button id="addNewObserver">Add New Observer checkbox</button>
    <input id="mainCheckbox" type="checkbox"/>
    <div id="observersContainer"></div>

    <script>

        var controlCheckBox = document.getElementById("mainCheckbox"),
            addBtn = document.getElementById("addNewObserver"),
            container = document.getElementById("observersContainer");

        extend(new Subject(),controlCheckBox);

        controlCheckBox["onclick"] = new Function( "controlCheckbox.Notify(controlCheckbox.checked)" );

        addBtn["onclick"] = AddNewObserver;

        function AddNewObserver(){
            var check = document.createElement("input");
            check.type = "checkbox";
            extend(new Observer(),check);
            check.Update = function(value){
                this.checked = value;
            };
            controlCheckBox.AddObserver(check);
            container.appendChild(check);
        }
    </script>

</body>
</html>